<template>
  <div class="filter">
    <AddContainer
      v-for="(item, index) in items"
      :key="index"
      :index="index"
      :items="items"
      ref="AddContainer"
      @deleteIndex="del"
      @uploadData="getData"
    ></AddContainer>
    <div class="filter_item">
      <Button class="btn" @click="add">添加组件</Button>
    </div>
    <div class="filter_item">
      <Button type="primary" @click="addGuest">新增</Button>
    </div>
    <div class="filter_item">
      (选择钟点房还是日住房)
      <Select
        v-model="optionChoice"
        style="width: 100px"
        @on-change="choiceChange($event)"
      >
        <Option
          v-for="item in optionChoices"
          :value="item.value"
          :key="item.key"
          >{{ item.key }}</Option
        >
      </Select>
    </div>
  </div>
</template>

<script>
import GuestManage from "../guest/GuestManage";
import AddContainer from "./AddContainer";
export default {
  name: "AddGuest",
  components: { GuestManage, AddContainer },
  data() {
    return {
      userName: "",
      sex: "",
      sexs: [
        { key: "男", value: "男" },
        { key: "女", value: "女" },
      ],
      phone: "",
      identy: "",
      roomNumber: 0,
      optionChoice: 0,
      optionChoices: [
        { key: "日住房", value: 1 },
        { key: "钟点房", value: 2 },
      ],
      items: [{}],
    };
  },
  methods: {
    addGuest() {
      if (
        this.items.userName != "" &&
        this.items.sex != "" &&
        this.items.phone != "" &&
        this.items.identy != ""
      ) {
        if (this.roomNumber == 0) {
          this.$axios
            .post("/api/user/addUser", {
              data: this.items,
            })
            .then((res) => {
              let result = res.data.data;
              console.log(result);
              if (result == 1) {
                console.log(result);
                alert("添加成功！");
                this.clear();
              } else {
                alert("添加失败，已存在改住客信息！");
              }
            });
        } else {
          this.$axios
            .post("/api/room/addRoomUser", {
              data: this.items,
              roomNumber: this.roomNumber,
              optionChoice: this.optionChoice,
            })
            .then((res) => {
              let result = res.data.data;
              this.$emit("on-close-modal", false);
              console.log(result);
              alert(result);
            });
        }
      } else {
        alert("请填写完整！");
      }
    },
    add() {
      this.items.push({
        userName: "",
        sex: "",
        phone: "",
        identy: "",
      });
    },
    del(index) {
      //  not allow to delete the first
      if (index !== 0) {
        this.items.splice(index, 1);
        console.log("deleted:", JSON.stringify(this.items));
      }
    },
    //  get the data from child
    getData(val) {
      console.log(val);
      let index = val.index;
      this.items[index] = val.data;
      console.log("I got val", JSON.stringify(this.items));
    },
    choiceChange(e) {
      this.optionChoice = e;
      console.log(this.optionChoice);
    },
  },
};
</script>

<style>
.filter {
  display: flex;
  flex-wrap: wrap;
  height: 700;
}
.filter_item {
  margin-left: 30px;
  margin-top: 30px;
  float: left;
}
</style>